<script lang="ts" setup>
import { Ref, render } from 'vue'
import { merge } from 'lodash-es'
import { useECharts } from '../hooks/useECharts'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'

import icon1 from '@/assets/unionEvaluation/icon1.png'
import icon2 from '@/assets/unionEvaluation/icon2.png'
import icon3 from '@/assets/unionEvaluation/icon3.png'
import icon1_active from '@/assets/unionEvaluation/icon1_active.png'
import icon2_active from '@/assets/unionEvaluation/icon2_active.png'
import icon3_active from '@/assets/unionEvaluation/icon3_active.png'

const props = defineProps<{
  /** 图表数据 */
  data: any
  /** 主题色 */
  colorDisk?: string[]
  /** 当前选中节点信息 */
  selectItem?: any
  /** 是否自定义tooltip */
  isDiyToolTip?: boolean
  /** 配置项 */
  options?: EChartsOption
}>()
const emit = defineEmits<{
  (e: 'clickItem', val: object): void
}>()
const slots = defineSlots<{
  tooltip(index: number, params: any): any
}>()

/** 容器 */
const chartRef = ref<HTMLDivElement | null>(null)
/** 实例方法 */
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
/** 计时器 */
let timer = shallowRef(0)

watchEffect(() => {
  /** 无数据则不绘制 */
  if (!props.data?.length) return

  /** 基本配置(在项目中使用时，修改成统一样式风格) */
  let basicOptions = {
    color: props.colorDisk,
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0
    },
    xAxis: {
      show: false,
      min: -6,
      max: 106
    },
    yAxis: {
      show: false,
      min: -6,
      max: 106
    },
    tooltip: {
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      borderColor: 'transparent',
      /** 若这里触发方式为点击或者时移入并点击，
       * 且同时有图标监听点击事件，
       * 会造成图标监听点击事件触发多次 */
      triggerOn: 'mousemove',
      // alwaysShowContent: true,
      // transitionDuration: 3,
      enterable: true,
      textStyle: {
        color: '#262626',
        fontSize: 14
      },
      className: !props.isDiyToolTip ? '' : '',
      formatter(params: any) {
        /** 自定义弹窗 */
        if (props.isDiyToolTip) {
          const div = document.createElement('div')
          render(slots?.tooltip(params?.[0]?.dataIndex, params)?.[0], div)
          return div
        }

        /** 默认弹窗 */
        const { name, score } = params.data || {}
        const dom = `
          <div>${name || '-'}</div>
          <div style="color:#595959;margin: 9px 0 13px 0;">四链融合指数：${score || '-'}</div>
          <div style="color:#0779FF;cursor: pointer">详细分析 ></div>
         `
        return dom
      }
    },
    series: [
      {
        data: props.data.map((i) => {
          let icon: any
          let size: any
          switch (i.depth) {
            case 1:
              icon = props.selectItem?.name === i.name ? icon1_active : icon1
              size = props.selectItem?.name === i.name ? [26, 28] : [22, 24]
              break
            case 2:
              icon = props.selectItem?.name === i.name ? icon2_active : icon2
              size = props.selectItem?.name === i.name ? 22 : 16
              break
            case 3:
              icon = props.selectItem?.name === i.name ? icon3_active : icon3
              size = props.selectItem?.name === i.name ? 13 : 9
              break
            default:
              break
          }
          return {
            ...i,
            symbolSize: size,
            symbol: `image://${icon}`
          }
        }),
        type: 'scatter',
        clip: false,
        zlevel: 100,
        animation: false,
        selectedMode: 'single',
        // 各象限区域
        markArea: {
          silent: true,
          data: [
            // 第一象限
            [
              {
                name: '领先型',
                distance: 10,
                xAxis: 50, // x 轴开始位置
                yAxis: 106, // y 轴结束位置(直接取最大值)
                itemStyle: {
                  color: '#FAFAFA'
                },
                label: {
                  show: false,

                  position: 'insideTopRight',
                  padding: 15,
                  color: '#06C46A',
                  fontSize: 14
                }
              },
              {
                yAxis: 50 // y轴开始位置
              }
            ],
            // 第二象限
            [
              {
                name: '改善型',
                yAxis: 106, // y 轴结束位置(直接取最大值)
                itemStyle: {
                  color: '#FAFAFA'
                },
                label: {
                  show: false,

                  position: 'insideTopLeft',
                  padding: 15,
                  color: '#17B8BB',
                  fontSize: 14
                }
              },
              {
                xAxis: 50, // x 轴结束位置
                yAxis: 50 // y轴开始位置
              }
            ],
            // 第三象限
            [
              {
                name: '薄弱型',
                yAxis: 50, // y 轴结束位置
                itemStyle: {
                  color: '#FAFAFA'
                },
                label: {
                  show: false,
                  position: 'insideBottomLeft',
                  padding: 15,
                  color: '#D7454C',
                  fontSize: 14
                }
              },
              {
                xAxis: 50, // x 轴结束位置
                yAxis: -6 // y轴开始位置
              }
            ],
            // 第四象限
            [
              {
                name: '潜力型',
                xAxis: 50, // x 轴开始位置
                yAxis: 50, // y 轴结束位置
                itemStyle: {
                  color: '#FAFAFA'
                },
                label: {
                  show: false,
                  position: 'insideBottomRight',
                  padding: 15,
                  color: '#EA8519',
                  fontSize: 14
                }
              },
              {
                yAxis: -6 // y轴开始位置
              }
            ]
          ]
        },
        // 中心点交集象限轴
        markLine: {
          silent: true, // 是否不响应鼠标事件
          precision: 2, // 精度
          lineStyle: {
            type: 'solid',
            color: ' rgba(194, 194, 194, 0.67)'
          },
          label: {
            color: '#FFFFFF',
            position: 'insideEndBottom',
            verticalAlign: 'middle',
            distance: 15,
            formatter: '{b}',
            fontSize: 14,
            lineHeight: 19
          },

          data: [
            {
              name: '发展质量',
              yAxis: 50,
              label: {
                color: '#AEBBD9' // 文字颜色
              }
            },
            {
              name: '协同程度',
              xAxis: 50,
              label: {
                color: '#AEBBD9' // 文字颜色
              }
            }
          ]
        }
      }
    ]
  } as EChartsOption

  /** 有传入的配置，则使用一个深度递归合并的配置 */
  if (props.options) {
    const { options } = props
    basicOptions = merge(basicOptions, options)
  }

  /** 绘制 */
  setOptions(basicOptions)

  /** 图表实例 */
  const echartInstance = getInstance()

  echartInstance?.off('click')
  /** 监听鼠标点击 */
  echartInstance?.on('click', (p) => {
    /** 将整个echarts事件参数回调出去 */
    emit('clickItem', p)
  })
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = 0
  }
})
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<style lang="less">
.basicChartTooltip {
  // backdrop-filter: blur(5px) !important;
  // min-width: 90px !important;
  // font-size: 14px !important;
  // color: #ffffff !important;
  // background: rgba(34, 36, 38, 0.8) !important;
  // box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.32) !important;
  // border-radius: 2px !important;
  // border-image: linear-gradient(90deg, rgba(163, 163, 163, 0.5), rgba(140, 140, 140, 0.5), rgba(169, 169, 169, 0.5)) 1 1 !important;
}
</style>
